
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="http://oog4yfyu0.bkt.clouddn.com/echarts.min.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/wordcloud.js"></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/anhui.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/aomen.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/beijing.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/chongqing.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/fujian.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/gansu.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/guangdong.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/guangxi.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/guizhou.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hainan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hebei.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/heilongjiang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/henan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hubei.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hunan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/jiangsu.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/jiangxi.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/jilin.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/liaoning.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/neimenggu.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/ningxia.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/qinghai.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/shangdong.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/shanghai.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/shanxi.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/sichuan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/taiwan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/tianjin.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/xianggang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/xinjiang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/xizang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/yunnan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/zhejiang.js "></script>
</head>

<body>
    <div id="main" style="width:800px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
    "title": [
        {
            "textStyle": {
                "fontSize": 18,
                "color": "#000"
            },
            "text": "折线图示例",
            "subtextStyle": {
                "fontSize": 12,
                "color": "#aaa"
            },
            "top": "auto",
            "left": "auto",
            "subtext": ""
        }
    ],
    "backgroundColor": "#fff",
    "legend": [
        {
            "data": [
                "最高气温",
                "最低气温"
            ],
            "show": true,
            "orient": "horizontal",
            "left": "center",
            "selectedMode": true,
            "top": "top"
        }
    ],
    "yAxis": [
        {
            "name": "",
            "nameGap": 25,
            "axisLabel": {
                "formatter": "{value} "
            },
            "type": "value",
            "max": null,
            "nameLocation": "middle",
            "min": null,
            "nameTextStyle": {
                "fontSize": 14
            }
        }
    ],
    "series": [
        {
            "name": "最高气温",
            "data": [
                11,
                11,
                15,
                13,
                12,
                13,
                10
            ],
            "symbol": "emptyCircle",
            "label": {
                "normal": {
                    "show": false,
                    "textStyle": {
                        "fontSize": 12,
                        "color": "#000"
                    },
                    "position": "top",
                    "formatter": null
                },
                "emphasis": {
                    "show": true
                }
            },
            "markPoint": {
                "data": [
                    {
                        "name": "最大值",
                        "label": {
                            "normal": {
                                "textStyle": {
                                    "color": "#fff"
                                }
                            }
                        },
                        "symbol": "pin",
                        "symbolSize": 50,
                        "type": "max"
                    },
                    {
                        "name": "最小值",
                        "label": {
                            "normal": {
                                "textStyle": {
                                    "color": "#fff"
                                }
                            }
                        },
                        "symbol": "pin",
                        "symbolSize": 50,
                        "type": "min"
                    }
                ]
            },
            "stack": "",
            "areaStyle": {},
            "showSymbol": true,
            "smooth": false,
            "type": "line",
            "step": false,
            "markLine": {
                "data": [
                    {
                        "name": "平均値",
                        "type": "average"
                    }
                ]
            },
            "indexflag": 1070372,
            "lineStyle": {
                "normal": {
                    "width": 1,
                    "curveness": 0,
                    "opacity": 1,
                    "type": "solid"
                }
            }
        },
        {
            "name": "最低气温",
            "data": [
                1,
                -2,
                2,
                5,
                3,
                2,
                0
            ],
            "symbol": "emptyCircle",
            "label": {
                "normal": {
                    "show": false,
                    "textStyle": {
                        "fontSize": 12,
                        "color": "#000"
                    },
                    "position": "top",
                    "formatter": null
                },
                "emphasis": {
                    "show": true
                }
            },
            "markPoint": {
                "data": [
                    {
                        "name": "最大值",
                        "label": {
                            "normal": {
                                "textStyle": {
                                    "color": "#fff"
                                }
                            }
                        },
                        "symbol": "pin",
                        "symbolSize": 50,
                        "type": "max"
                    },
                    {
                        "name": "最小值",
                        "label": {
                            "normal": {
                                "textStyle": {
                                    "color": "#fff"
                                }
                            }
                        },
                        "symbol": "pin",
                        "symbolSize": 50,
                        "type": "min"
                    }
                ]
            },
            "stack": "",
            "areaStyle": {},
            "showSymbol": true,
            "smooth": false,
            "type": "line",
            "step": false,
            "markLine": {
                "data": [
                    {
                        "name": "平均値",
                        "type": "average"
                    }
                ]
            },
            "indexflag": 1070372,
            "lineStyle": {
                "normal": {
                    "width": 1,
                    "curveness": 0,
                    "opacity": 1,
                    "type": "solid"
                }
            }
        }
    ],
    "xAxis": [
        {
            "name": "",
            "data": [
                "周一",
                "周二",
                "周三",
                "周四",
                "周五",
                "周六",
                "周日"
            ],
            "nameGap": 25,
            "axisLabel": {
                "interval": "auto"
            },
            "type": "category",
            "max": null,
            "nameLocation": "middle",
            "min": null,
            "nameTextStyle": {
                "fontSize": 14
            }
        }
    ],
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597",
        "#f6f5ec"
    ],
    "_index_flag": 1070372,
    "tooltip": {},
    "toolbox": {
        "show": true,
        "top": "center",
        "orient": "vertical",
        "feature": {
            "saveAsImage": {
                "show": true
            }
        },
        "left": "right"
    }
};
        myChart.setOption(option);
    </script>
</body>

</html>